<!DOCTYPE html>
<html>
    <head>
        <title>Pusher Test</title>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <style>
        .header input{
            margin: 20px auto;
            font-size: 16px;
        }
        .header button{
            margin-right: 10px;
            font-size: 16px;
            /*float: right;*/
        }
        .text{
            font-size: 20px;
            text-align: center;
        }
        form{
            margin-left: 43%;
        }
        .button{
            margin-left: 46%;
        }
        .header dev{
            font-size: 18px;
        }
        #result{
            text-align: center;
            font-size: 16px;
            margin-top: 10px;
        }
        #info{
            margin-top: 10px;
            margin-left: 43%;
        }
    </style>
    <body>
    <div class="header">
        <div class="text">Excel 文件上传</div>
        <form action="{{url('/api/upload/excel')}}" enctype="multipart/form-data" method="post">
            上传文件: <input type="file" name="fileUpload" id="file">
        </form>
        <div class='container'>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
                    0%
                </div>
            </div>
        </div>
        <br>
        <div class="button">
            <button onclick="fileSelected()">文件信息</button><button type='submit' onclick="uploadFile()">确认上传</button>
        </div>
        <div id="info">
            <div id="fileName"></div>
            <div id="fileSize"></div>
            <div id="fileType"></div>
        </div>
        <div id="result"></div>
        <br/>
    </div>

        <script>
               function fileSelected() {
                   var file = document.getElementById('file').files[0];
                   if (file) {
                       var fileSize = 0;
                       if (file.size > 1024 * 1024)
                           fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                       else
                            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
                            document.getElementById('fileName').innerHTML = '文件名称: ' + file.name;
                            document.getElementById('fileSize').innerHTML = '文件大小: ' + fileSize;
                            document.getElementById('fileType').innerHTML = '文件类型: ' + file.type;
                   }
               }
               function uploadFile() {
                     var fd = new FormData();
                     fd.append("fileUpload", document.getElementById('file').files[0]);
                     var xhr = new XMLHttpRequest();
                     xhr.upload.addEventListener("progress", uploadProgress, false);
                     xhr.addEventListener("load", uploadComplete, false);
                     xhr.addEventListener("error", uploadFailed, false);
                     xhr.addEventListener("abort", uploadCanceled, false);
                     xhr.open("POST", "{{url('/api/upload/excel')}}");//修改成自己的接口
                     xhr.send(fd);

               }

               function uploadProgress(evt) {
                   if (evt.lengthComputable) {
                       var percent = Math.round(evt.loaded * 100 / evt.total);
                       $('.progress-bar').html(percent.toFixed(2) + '%');
                       $('.progress-bar').css('min-width',percent.toFixed(2) + 'em')
                   }
                   else {
                       document.getElementById('progress').innerHTML = 'unable to compute';
                   }
               }
               function uploadComplete(evt) {
                   /* 服务器端返回响应时候触发event事件*/
                   var data = evt.target.responseText;
                   if(JSON.parse(data).code == 200){
                       document.getElementById('result').innerHTML = JSON.parse(data).msg;
                   }


               }
               function uploadFailed(evt) {
                   alert("There was an error attempting to upload the file.");
               }
               function uploadCanceled(evt) {
                   alert("The upload has been canceled by the user or the browser dropped the connection.");
               }
             </script>
    </body>
    <script src="{{ asset('js/app.js') }}"></script>
</html>

